<!--
 * @FileDescription 遥控驾驶
 * @Author lz
 * @Date 20230223 13:33:39
 * @LastEditors lz
 * @LastEditTime 20230223 13:33:39
-->
<template>
    <div class="wp">
        <!-- 顶部 -->
        <hdrModel Hierarchy="2" :ID="0"></hdrModel>
        <!-- <div class="times" v-if="HomeContent.Default.CacheFullData.value.FaultPointCollection"> -->
        <!-- <div class="times" v-if="HomeContent.Default.CacheFullData.value"> -->
        <div class="times" v-if="HomeContent.Default.FaultPoints.value">
            <span>00:{{ formattedMinutes }}:{{ formattedSeconds }}</span>  
        </div>
        <div class="Btn" @click="submit()" v-if="HomeContent.Default.ModeType.value == 3">
            提交
        </div>
        <!-- 项目列表 -->
        <demarcateList v-if="HomeContent.Default.ModeType.value != 3"></demarcateList>
        <!-- 视角导航 -->
        <perspectiveList></perspectiveList>

    </div>
</template>

<script setup lang="ts">
import hdrModel from '../header/index.vue'
import demarcateList from '../demarcateMenu/model/demarcateList.vue'
import perspectiveList from '../demarcateMenu/model/perspectiveList.vue'
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, computed } from 'vue'
import AssetLoaderComponent from '@runtime/UnityEngineBridge/AssetLoaderComponent';
import { useRouter } from 'vue-router'
import HomeContent from '../HomeContent';
import OrbitCameraComponent from '@components/Apps/InertialNavigation/OrbitCameraComponent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
const router = useRouter()
async function again() {
    // await HomeContent.Default.Awake()
    let Id = []
    Id = await AssetLoaderComponent.Default.LoadAllAsync(HomeContent.Default.MenuList.value.Asset);
    console.log(Id, '模型回调ID');
    //存贮Id
    HomeContent.Default.ResourceID.value = Id
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithSendInstanceIDRequest(Id))
    // await OrbitCameraComponent.Default.UpdateV2Async('MainCar', 0, 45, 3, 0.1, 10, 1, 1, 1);
    HomeContent.Default.ProgressText.value = '资源初始化'
    HomeContent.Default.ProgressVal.value = 75
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '场景初始化'
        HomeContent.Default.ProgressVal.value = 55
    }, 400);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载中'
        HomeContent.Default.ProgressVal.value = 45
    }, 600);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载中'
        HomeContent.Default.ProgressVal.value = 25
    }, 800);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '加载完成'
        HomeContent.Default.ProgressVal.value = 0
    }, 1000);
    setTimeout(async () => {
        HomeContent.Default.Loaded.value = false
    }, 1200);
}

// ============================================================================================
// 倒计时
// console.log("HomeContent.Default.Duration.value", HomeContent.Default.Duration.value);

const remainingTime = ref(HomeContent.Default.Duration.value * 1000);
// const remainingTime = ref(0.1 * 60 * 1000);

// let timer: any = null;
function startCountdown() {
  HomeContent.Default.timerControl.value = setInterval(() => {
    remainingTime.value -= 1000;
    if (remainingTime.value <= 0) {
      // 模拟一次点击提交
      submit();
      clearInterval(HomeContent.Default.timerControl.value);
      HomeContent.Default.timerControl.value = null;
    }
  }, 1000);
}
const formattedMinutes = computed(() => {
  const minutes = Math.floor(remainingTime.value / 60000);
  return minutes.toString().padStart(2, "0");
});

const formattedSeconds = computed(() => {
  const seconds = Math.floor((remainingTime.value % 60000) / 1000);
  return seconds.toString().padStart(2, "0");
});
// ===================================================================================================

//提交
function submit() {
    let newArr = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrainingAppraiseRequest())
    newArr.then((res) => {
        console.log(res, '提交返回值');
        HomeContent.Default.ScoreDetails.value = res
        router.push('summaryPage')
    })
}

onMounted(function () {
    again()
    startCountdown()
});
</script>

<style scoped>
.times {
    position: absolute;
    left: 69%;
    top: 18px;
    float: left;
    line-height: 36px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-right: 10px;
}
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* background: linear-gradient(60deg, #011D3D, #07264A); */
    position: relative;
}
.Btn {
    position: absolute;
    left: 75%;
    top: 16px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/images/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: -7px;
    margin-right: 10px;
}

.Btn:hover {
    color: #fff;
    background-image: url('/images/btn_bg_select.png');
}
</style>